<template>
	<view class="notification-container">
	    <view class="notification-item">
	    <!--  <view class="icon-box">
	        <image class="icon" :src="messageDetil.icon" style="border: 1rpx solid red;"></image>
	      </view> -->
		  <view style="width: 100%;">
			  <view class="content-box">
			    <text class="title">{{messageDetil.title}}</text>
			    <text class="time">{{messageDetil.createTime}}</text>
			    
			  </view>
			  <text class="desc">{{messageDetil.content}}</text>
		  </view>
	    </view>
		<view class="divider"></view>
	  </view>
</template>

<script>
	export default {
		props:{
			messageDetil:Object
		},
	  data() {
	    return {
	      notifications: [
	        {
	          icon: '/static/logo.png', // 需准备对应的图标资源路径
	          title: '求职招聘软件已经适配抖音小程序...',
	          time: '12 - 03 22:18',
	          desc: '二十求职招聘软件已经适配抖音小程序...'
	        }
	      ]
	    };
	  }
	};
</script>

<style lang="scss">
	.notification-container {
	  padding: 20rpx;
	}
	.notification-item {
	  display: flex;
	  align-items: center;
	  margin-bottom: 20rpx;
	}
	.icon-box {
	  width: 60rpx;
	  height: 60rpx;
	  margin-right: 20rpx;
	}
	.icon {
	  width: 100%;
	  height: 100%;
	}
	.content-box {
	  flex: 1;
	}
	.title {
	  font-size: 25rpx;
	  width: 65%;
	  margin-bottom: 5rpx;
	}
	.time {
		width: 35%;
		float: right;
	  font-size: 23rpx;
	  color: #999;
	  margin-bottom: 5rpx;
	}
	.desc {
	  font-size: 23rpx;
	  color: #666;
	}
	.divider {
		width: 100%;
		height: 6rpx;
		background-color: #eee;
		margin-top: 10rpx;
		
	}
</style>